<template>
  <div class="hello">
    <!-- 实时输入的文本框，使用 v-model 实现双向绑定 -->
    <input v-model="inputValue" placeholder="请输入内容" />
    <!-- 显示输入内容的区域 -->
    <div class="output">
      {{ inputValue }}
      <div class="separator"></div> <!-- 添加一个分隔 div -->
      <button @click="clearInput">清空</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    clearInput() {
      this.inputValue = '';
    }
  }
};
</script>

<style scoped>
.separator {
  height: 20px; /* 设置分隔 div 的高度 */
}
.output {
  font-size: 24px;
  margin-top: 10px;
  color: #4177ae;
}
</style>    